<template>
	<view class="page-index">
		<MySwiper :propsList="swiperList"></MySwiper>
		<Sticky :propsList="stickyItems"></Sticky>
		<TopicList :list="list"></TopicList>
	</view>
</template>

<script>
	import TopicList from '../../components/topic-list.vue'
	import Sticky from '../../components/sticky.vue'
	import MySwiper from '../../components/my-swiper.vue'
	import ListOptions from '../../minxins/list-options.js'
	export default {
		data() {
			return {
				page: 'index', 
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				stickyItems: [],
				swiperList: []
			}
		},
		mixins: [ListOptions],
		components: {
			TopicList, Sticky, MySwiper
		},
		onLoad(options) {
			this.options = Object.assign({}, this.options, options)
			this.fetchPageData().then((response) => {
				this.renderPage(response)
			})
		},
		methods: {
			fetchPageData(type = '') {
				this.options.detail_excerpt = 1;
				let pageData = this.$api.listTopic(this.options);
				if (type != 'onReachBottom') {
					this.$api.listSwiper().then((response) => {
						this.swiperList = response.data
					})
					this.$api.listStickyTopic({"position": 1}).then((response) => {
						this.stickyItems = response.data
					})
				}
				return pageData;
			},
			changeIndicatorDots(e) {
					this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
					this.autoplay = !this.autoplay
			},
			intervalChange(e) {
					this.interval = e.target.value
			},
			durationChange(e) {
					this.duration = e.target.value
			}
		},
		onShow() {
			let needFreshPage = this.$store.getters.getNeedFreshPage
			console.log('needFreshPage', needFreshPage)
			if (needFreshPage) {
				this.fetchPageData().then((response) => {
					this.renderPage(response)
					this.$store.commit('setNeedFreshPage', false)
				})
			}
		}
		
	}
</script>

<style lang="scss">
.page-index {
	.swiper {
		height: 400upx;
		uni-image {
			width: 100%;
			height: 100%;
		}
		.description {
			display: block;
			width: 100%;
			text-align: center;
			background-color: rgba($color: #000000, $alpha: 0.2);
			position: absolute;
			bottom: 0;
			color: #fff;
		}
		.swiper-item-image {
			width: 100%
		}
			
	}
}
</style>
